<template>
  <div class="details_page">
    <!-- <v-head headTitle="兑换成功">
    </v-head> -->
    <div class="content">
      <van-icon
        :name="state==='success'?'checked':'clear'"
        size="100px"
        :color="state==='success'?'#28b46a':'red'"
        class="icon-css"
      />
      <p
        class="status"
        v-text="state==='success'?'支付成功！':'支付失败'"
      ></p>
      <van-button
        size="large"
        @click="goOrder"
        class="blue-btn"
      >查看订单</van-button>
      <van-button
        size="large"
        @click="goPoints"
        class="white-btn"
      >返回权益商城</van-button>
    </div>

  </div>
</template>

<script>
import { Icon, Button } from 'vant';
export default {
  data() {
    return {
      state: ''
    };
  },
  mounted() {
    const state = this.$route.query.state;
    this.state = state;
    window.history.pushState(1, null, '/#/home');
    window.history.pushState(2, null, '/#/points');
  },
  methods: {
    goOrder(id) {
      this.$router.replace('/myOrder');
    },
    goPoints() {
      this.$router.replace('/points');
    }
  },
  components: {
    'van-icon': Icon,
    'van-button': Button
  }
};
</script>

<style lang="scss" scoped>
.content {
  // margin-top: 88px;
  margin-bottom: 88px;
  overflow: hidden;
}
.details_page {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ebebeb;
  z-index: 101;
  width: 100%;
  height: 100%;
}
.icon-css {
  text-align: center;
  margin: 96px auto 59px;
  display: block;
}
.status {
  @include sc(50px, #333);
  text-align: center;
}
.van-button--large {
  width: 90%;
  display: block;
  margin: 30px auto;
}
.blue-btn {
  background-color: #28b46a;
  color: #fff;
  border-radius: 8px;
}
.white-btn {
  // height: 88px;
  border-radius: 8px;
  border: solid 1px #28b46a;
  color: #28b46a;
}
</style>
